var pageWidth = document.documentElement.clientWidth;
	var pageHeight = document.documentElement.clientHeight;
	var font_can = document.getElementById("font_can");
	var font_ctx = font_can.getContext("2d");
	var font_span = document.getElementById("font_span");
	var hover_block = document.getElementById("hover_block");
	var page = document.getElementById("pre_page");
	var pre_body_arrow = document.getElementById("pre_body_arrow");

	
	font_particle();
	font_act();
	
	getResizeHandle();

	pre_body_arrow.onclick=function(){
		page.style.animation = "preAct 1s linear "; // scale(0,0)infinite alternate
		setTimeout(function(){//等待缩放动作完成
			page.style.display = "none";
		},950);
		
	}

	function getResizeHandle(){
		if(window.addEventListener){
			window.addEventListener("resize",resizeFun);
		}else{
			window.attachEven("onresize",resizeFun);
		}
	}

	function resizeFun(){
		font_particle();
	}

	function font_particle(){
		pageWidth = document.documentElement.clientWidth;
		pageHeight = document.documentElement.clientHeight;
		page.style.width=pageWidth+"px";
		page.style.height=pageHeight+"px";
		var string = "WELCOME";
		var width_array = [];//存储每个字的宽度
		var word_W = document.getElementsByClassName("W");
		font_can.width = pageWidth;
		font_can.height = pageHeight;
		var font_x = 0.5 * pageWidth;
		var font_y = 0.5 * pageHeight;
		var text = "WELCOME";
		font_ctx.fillStyle = "#fff";
		font_ctx.font = "60px Arial";
		font_ctx.textAlign="center";
		font_ctx.textBaseline = "middle"; 
		var font_width = font_ctx.measureText(text).width;//测量text宽度
		font_ctx.fillText(text,font_x,font_y);
		font_span.style.width = font_width + "px";//span宽度
		font_span.style.height = "60px";//span高度
		hover_block.style.height = "60px";		
		var span_top = parseInt(0.5 * pageHeight- 30) ;//sapn的top位置
		var span_left = parseInt(0.5 * pageWidth-font_width/2) ;//span的left位置
		font_span.style.top = span_top +"px";
		font_span.style.left = span_left +"px";
		hover_block.style.top = span_top +"px";
		hover_block.style.left = span_left +"px";
		font_can.style.display="none";
	}
	
	function font_act(){


		var hover = document.getElementsByClassName("hover");
		var letter = document.getElementsByClassName("letter");
		var color = ["#f44336","#e91e63","#03a9f4","#ffeb3b","#9c27b0","#ff0000","#00ffd7"];
		for(let i=0;i<hover.length;i++){
			var letter = document.getElementsByClassName("letter");
			hover[i].onmouseover=function explode(){
			var rect = letter[i].getElementsByTagName("rect");
			letter[i].style.fill= color[i];
			for(let j=0;j<rect.length;j++){
				var t_x = (Math.random()-0.5)*250 + "px";//-1~1
				var t_y = (Math.random()-0.5)*250 + "px";//-1~1
				rect[j].style.transform = "translate(" + t_x + "," + t_y + ")";					
			}
			}
			hover[i].onmouseout=function restore(){
			var rect = letter[i].getElementsByTagName("rect");				
			for(let j=0;j<rect.length;j++){
				letter[i].style.fill= "#fff";
				t_x = (Math.random()-0.5)*25 + "px";//-1~1
				t_y = (Math.random()-0.5)*25 + "px";//-1~1
				rect[j].style.transform = "translate(" + t_x + "," + t_y + ")";
				setTimeout(function(){
					rect[j].style.transform = "translate(0,0)";
				},650);					
			}				
			}
		}
		for(let i=0;i<hover.length;i++){
			hover[i].onmouseover();
				
		}
		setTimeout(function(){
			for(let i=0;i<hover.length;i++){
				hover[i].onmouseout();
			}},500);
	}	